<template>
	<div class="loginVue">
		<div class="login-container">
			<div class="login-content">
				<div class="login-title">{{ $setting.project_name }}</div>
				<div class="login-name login-input">
					<input type="text" name="username" v-model="login.username" autocomplete="off" />
					<span
						class="placeholder"
						:class="{ fixed: login.username != '' && login.username != null }"
					>请输入用户名（手机号）</span>
				</div>
				<div class="login-password login-input">
					<input type="password" name="password" v-model="login.password" autocomplete="off" />
					<span
						class="placeholder"
						:class="{ fixed: login.password != '' && login.password != null }"
					>请输入密码</span>
				</div>
				<div class="login-captcha login-input">
					<input type="text" v-model="login.captcha" @keyup.enter="loginMet" placeholder="请输入验证码" />
					<div class="captchaShow" @click="reloadImg">
						<!--请求验证码-->
						<img :src="imgUrl" alt />
					</div>
				</div>
				<div class="buttonDiv">
					<el-button :disabled="login.captcha == ''" type="primary" @click="loginMet">登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import { mapState, mapActions } from 'pinia'
import userStore from '@/store/user.js'
export default {
	data() {
		return {
			login: {
				username: "",
				password: "",
				captcha: "",
			},
			imgUrl: "https://html5iq.oss-cn-beijing.aliyuncs.com/ebtech/validateCode.jpeg"
		}
	},
	mounted() {
		 
	},
	computed: {
		...mapState(userStore, ['info'])
	},
	watch: {

	},
	components: {

	},
	methods: {
		...mapActions(userStore, ['saveUserInfo']),
		loginMet() {
			//存储用户信息s
			this.saveUserInfo({name:"hanxuming"});
			//this.$store.commit("USERINFO",{});
			//登陆成功，将用户信息存储到sessionStorage，临时简单解决方案
			sessionStorage.setItem('isLoginSuc', 'yes');
			this.$router.push("/");
		},
		reloadImg() {
			//生成一个随机数（防止缓存）
			var num = Math.ceil(Math.random() * 10000);
			this.imgUrl = this.imgUrl + "?" + num;
		},
	}
}
</script>
<style type="text/css" lang="less" scoped>
@gradient-color: #3788ee;
@bg-color: #f7f8fa;
@title-color: #3a3a3a;
@text-color: #7e7e7e;
@placeholder-color: #7e7e7e;
.loginVue {
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: url(../assets/background.svg) no-repeat 50%;
	.login-container {
		width: 320px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		.login-content {
			letter-spacing: 2px;
			background: #fff;
			padding: 70px 30px 20px;
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
			border-radius: 3px;
			box-sizing: border-box;
			> div {
				margin: 30px 0;
				&.login-input {
					position: relative;
					.placeholder {
						position: absolute;
						color: @placeholder-color;
						top: 6px;
						font-size: 16px;
						transition: all 0.2s;
						left: 0;
						pointer-events: none;
					}
					input {
						font-size: 16px;
						padding: 8px 0;
						height: 40px;
						width: 100%;
						border: none;
						border-radius: 0;
						border-bottom: 1px solid #d3d3d3;
						box-shadow: inset 0 0 0 1000px #fff;
						outline: none;
						box-sizing: border-box;
						transition: 0.3s;
						font-weight: 200;
						&:focus {
							border-bottom-color: @gradient-color;
							box-shadow: inset 0 0 0 1000px #fff;
						}
					}
					input:focus + .placeholder,
					.placeholder.fixed {
						font-size: 13px;
						top: -16px;
					}
					input:-webkit-autofill + .placeholder {
						font-size: 13px;
						top: -16px;
					}
				}
				&.login-title {
					font-size: 30px;
					color: @title-color;
					line-height: 1;
					margin: -16px 0px 40px;
					font-weight: 200;
				}
				&.login-captcha {
					overflow: hidden;
					input {
						width: 60%;
						float: left;
					}
					.captchaShow {
						float: left;
						width: 40%;
						cursor: pointer;
						margin-top: 10px;
						cursor: pointer;
					}
				}
			}
			> .buttonDiv {
				margin-top: 45px;
				.h-btn {
					padding: 12px 0;
					font-size: 18px;
					opacity: 0.8;
					border-radius: 3px;
					background: @gradient-color;
					border-color: @gradient-color;
					&:hover {
						opacity: 1;
						background: @gradient-color;
						border-color: @gradient-color;
					}
				}
				.el-button {
					width: 100%;
				}
			}
		}
		.copyright {
			letter-spacing: 1px;
			margin-top: 50px;
			color: @text-color;
			font-size: 12px;
			a {
				color: @text-color;
			}
		}
	}
}
</style>